<script setup>
import { ref, watch } from 'vue'
import DataForm from './DataForm.vue'

// 定义props
const props = defineProps({
  // 对话框标题
  title: {
    type: String,
    default: '表单'
  },
  // 对话框是否可见
  visible: {
    type: Boolean,
    default: false
  },
  // 对话框宽度
  width: {
    type: String,
    default: '50%'
  },
  // 表单数据
  modelValue: {
    type: Object,
    required: true
  },
  // 表单字段配置
  fields: {
    type: Array,
    required: true
  },
  // 表单规则
  rules: {
    type: Object,
    default: () => ({})
  },
  // 表单标签宽度
  labelWidth: {
    type: String,
    default: '100px'
  },
  // 表单尺寸
  size: {
    type: String,
    default: 'default'
  },
  // 是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  },
  // 是否显示取消按钮
  showCancelButton: {
    type: Boolean,
    default: true
  },
  // 是否显示确认按钮
  showConfirmButton: {
    type: Boolean,
    default: true
  },
  // 确认按钮文本
  confirmButtonText: {
    type: String,
    default: '确定'
  },
  // 取消按钮文本
  cancelButtonText: {
    type: String,
    default: '取消'
  }
})

// 定义事件
const emit = defineEmits(['update:visible', 'update:modelValue', 'submit', 'cancel'])

// 对话框可见状态
const dialogVisible = ref(props.visible)

// 表单数据
const formData = ref({ ...props.modelValue })

// 表单引用
const formRef = ref(null)

// 监听visible变化
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val
  }
)

// 监听dialogVisible变化
watch(
  () => dialogVisible.value,
  (val) => {
    emit('update:visible', val)
  }
)

// 监听modelValue变化
watch(
  () => props.modelValue,
  (val) => {
    formData.value = { ...val }
  },
  { deep: true }
)

// 表单验证
const validate = async () => {
  if (formRef.value) {
    return await formRef.value.validate()
  }
  return Promise.resolve(true)
}

// 重置表单
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetForm()
  }
}

// 提交表单
const submitForm = async () => {
  try {
    await validate()
    emit('submit', { ...formData.value })
    closeDialog()
  } catch (error) {
    console.error('表单验证失败', error)
  }
}

// 取消
const cancelForm = () => {
  resetForm()
  emit('cancel')
  closeDialog()
}

// 关闭对话框
const closeDialog = () => {
  dialogVisible.value = false
}

// 暴露方法
defineExpose({
  validate,
  resetForm,
  submitForm,
  closeDialog
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @closed="resetForm"
  >
    <data-form
      ref="formRef"
      v-model="formData"
      :fields="fields"
      :rules="rules"
      :label-width="labelWidth"
      :size="size"
      :disabled="disabled"
      :readonly="readonly"
      @update:model-value="$emit('update:modelValue', $event)"
    >
      <template v-for="field in fields" :key="field.prop" #[field.prop]="scope">
        <slot :name="field.prop" v-bind="scope"></slot>
      </template>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="showCancelButton" @click="cancelForm">{{ cancelButtonText }}</el-button>
          <el-button v-if="showConfirmButton" type="primary" @click="submitForm" :disabled="disabled">
            {{ confirmButtonText }}
          </el-button>
        </div>
      </template>
    </data-form>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style> 